/* 第一页 */
.page1 {
    /*
     *  background设置背景
     *      url存放的是背景图片的地址
     *      no-repeat不平铺（repeat平铺）
     *  background-size: cover;
     *      设置背景图片的大小（此处是让其以适合的比例占满整个屏幕=>cover）
     */
    background: url('../image/index_6.png') no-repeat;
    background-size: cover;
}

.page1 img {
    /* 让所有图片相对于当前页面定位 */
    position: absolute;
}

.page1 img:nth-of-type(1) {
    /*
     * 我们的页面是移动端的响应式布局开发页面（适配所有手机的），所以我们框架中是按照REM响应式开发规范完成的
     *    1.我们需要把页面中所有PX单位的值除以100，变为REM单位的值 
     */
    width: 6.88rem;
    height: 3.48rem;
    top: .54rem;
    left: .62rem;
}

.page1 img:nth-of-type(2) {
    width: 7.5rem;
    height: 4.3rem;
    left: 0;
    bottom: 0;
}

.page1 img:nth-of-type(3) {
    width: 3.2rem;
    height: 2.1rem;
    left: 1.8rem;
    top: 6.6rem;
}

.page1 img:nth-of-type(4) {
    width: 2.5rem;
    height: 2.8rem;
    left: .6rem;
    top: 4rem;
}

.page1 img:nth-of-type(5) {
    width: 4rem;
    height: 4rem;
    left: 3.1rem;
    top: 3.8rem;
}

/* 第二页 */
.page2 {
    background: url('../image/page2_1.jpg') no-repeat;
    background-size: cover;
}

.page2>* {
    /* PAGE2下儿子中所有的标签 */
    position: absolute;
}

.page2>img:nth-of-type(1) {
    width: 2.2rem;
    height: 1.6rem;
    left: .8rem;
    top: 1.3rem;
}

.page2>img:nth-of-type(2) {
    width: 2.2rem;
    height: 2rem;
    right: .6rem;
    top: 1.2rem;
}

.page2>img:nth-of-type(3) {
    width: 1.6rem;
    height: 1.2rem;
    right: .6rem;
    top: 3.4rem;
}

.page2 .text {
    left: .8rem;
    top: 3rem;
}

.page2 .text p {
    width: 3.6rem;
    height: .64rem;
    line-height: .64rem;
    font-size: .32rem;
}

.page2 .photo{
    width: 5.44rem;
    height: 3.24rem;
    padding: .4rem;
    background: url('../image/page2_6.png') no-repeat;
    background-size: 100% 100%;
    bottom: 2rem;
    /* 水平居中 */
    left: 50%;
    margin-left: -3.12rem;
}

.page2 .photo img{
    width: 100%;
    height: 100%;
}